{% extends 'component/layout.html' %}
{% block title %} 首页 {% endblock %}
{% block style %}
<link rel="stylesheet" type="text/css" href="less/index.less">
{% endblock %}
{% block body %}

{% endblock %}
{% block script %}

{% endblock %}

<style type="text/css">
    
    @media (max-width: 576px){}
    @media (min-width: 768px) {}
    @media (max-width: 768px) {}


    &:hover{
        color:#75C5F0;
    }
    .row{margin-left: -10px;margin-right: -10px;}
    [class*="col"]{padding-right: 10px;pl10px}
    [class*="col-sm-"]{padding-right: 0;}
    [class*="col-sm-"]+[class*="col-sm-"]{padding-left: 0; }
</style>

:nth-child(1)

<ul class="tool-bar">
    <li class="navbar-tel">186-1698-9675</li>
    <li>加入我们</li>
    <li>联系我们</li>
</ul>
    {% set nav = {
        "首页": "index.html",
        "关于我们": "about.html",
        "业务范围": "copeBusiness.html",
        "新闻资讯": "news.html",
        "合作资源": "cooperation.html",
        "我的认证": "#relation.html",
        "联系我们": "contact.html",
    } %}
    <ul class="nav navbar-nav">
        {% for item,v in nav -%}
        <li><a {% if loop.first %}class="active"{% endif %} href="{{v}}">{{item}}</a></li>
        {% endfor %}
    </ul>

    <nav class="mx-auto" style="width: 200px;">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#"><</a></li>
            <li class="page-item  active"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">></a></li>
        </ul>
    </nav>


    <script type="text/javascript" src="node_modules/swiper/dist/js/swiper.min.js"></script>
    <script>
    $(document).ready(function() {
        var mySwiper = new Swiper('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
            // 如果需要滚动条

        })
    })